<template>
  <div>
    <a-tabs tab-position="left" animated>
      <a-tab-pane key="2" tab="各个子过程的作用">
        <template v-for="ka in pmpHooks.knowledgeAreaList.value" :key="ka.id">
          <h3>{{ ka.nameCn }}</h3>
          <ul>
            <template
              v-for="pg in pmpHooks.processGroupList.value"
              :key="pg.id"
            >
              <li
                v-for="p in pmpHooks.processBelong.value[pg.id][ka.id]"
                :key="p.id"
              >
                {{ p.nameCn }} : {{ p.usage }}
              </li>
            </template>
          </ul>
        </template>
      </a-tab-pane>
      <a-tab-pane key="3" tab="Item Detail">
        <!-- <a-button
          v-for="k in Object.keys(pmpHooks.viewMap)"
          @click="showInfo(k)"
          :key="k"
          >{{ pmpHooks.viewMap[k].title }}</a-button
        > -->
      </a-tab-pane>
    </a-tabs>

    <!-- <a-button @click="showInfo('pControlCost')">pControlCost</a-button> -->
  </div>

  <a-modal
    :width="'100%'"
    style="height: 100%; top: 8px"
    v-model:open="open"
    :destoryOnClose="true"
    :title="title"
    @ok="closeModal"
  >
    <ItemDetailView :c="currentViewName"></ItemDetailView>
  </a-modal>
</template>

<script setup>
import { ref } from "vue";
import { messageApi } from "@/utils/MessageUtils";
import pmpHooks from "@/hooks/PmpHooks.js";
import ItemDetailView from "@/components/ItemDetailView.vue";

const currentViewName = ref("");
const title = ref("");

// function showInfo(v) {
//   currentViewName.value = v;
//   title.value = pmpHooks.viewMap[v].title;
//   openModal();
// }

const open = ref(false);
function closeModal() {
  open.value = false;
}

function openModal() {
  // console.log('=====', props.id)

  // console.log('=====', data.value)
  open.value = true;
}
</script>

<style></style>
